<template>
  <div id="Support">
    <van-tabs border sticky color="#0cf" title-active-color="#0cf" v-model="active">
      <van-tab title="导师信息">
        <vj-list style="margin-top: 10px" :load-more="onTeacherLoad.bind(this)">
          <template #default="{item}">
            <section @click="$pushRoute({path:'/support/teacher',query:{customId:item.id}})" class="c-teacher">
              <van-image fit="cover" class="c-teacher__img" :src="item.avatar"/>
              <div class="c-teacher__wrap">
                <h3 class="c-teacher__name">{{ item.realname }}</h3>
                <p class="c-teacher__addr">{{ item.companyName }} {{ item.profession }}</p>
                <em>{{ item.investment }}</em>
              </div>
            </section>
          </template>
        </vj-list>
      </van-tab>
      <van-tab title="问题列表">
        <vj-list style="margin-top: 10px" :load-more="onFeqLoad.bind(this)">
          <template #default="{item:{mistitle,name,title,sortName,replyNo,createTime,id,replyno}}">
            <section @click="$pushRoute({path:'/support/feq',query:{customId:id}})" class="c-feq">
              <h3 class="c-feq__title">{{ mistitle }}</h3>
              <div class="c-feq__member">
                <van-image fit="cover" class="c-feq__avatar" :src="avatar"/>
                <em>{{ name }}</em>
              </div>
              <p class="c-feq__content">{{ title }}</p>
              <footer class="feq-footer">
                <aside class="feq-footer__wrap">
                  <div class="feq-footer__tag">{{ sortName }}</div>
                  <span>{{ replyno }} 回答</span>
                </aside>
                <em>{{ createTime }}</em>
              </footer>
            </section>
          </template>
        </vj-list>
        <van-image @click="$pushRoute('support/question-form')" class="a-feature active-able"
                   :src="require('@/assets/img/bn2.png')"/>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script lang="ts">
import Vue, {ComponentOptions, VueConstructor} from "vue"
import Component from 'vue-class-component'
import VjList from "@/components/vj-list.vue";
import {asyncSleep} from "vijay-util";
import {requestByGet, requestByPost} from "@/utils/request";
import {avatar} from '@/config/properties';

let i = 5, j = 2;
@Component({
  components: {VjList}
})
export default class Support extends Vue implements ComponentOptions<Vue> {
  name = "Support";
  active = 0;

  async onTeacherLoad(pageNo, pageSize) {
    const {records} = await requestByGet(`/sys/user/userInfoList`, {pageNo, pageSize, roleType: 2, userType: 2});
    return records;
  }

  async onFeqLoad(pageNo, pageSize) {
    const {records} = await requestByGet(`/qqc/qqcMistake/yhList`, {pageNo, pageSize});
    return records;
  }
}
</script>

<style scoped lang="scss">
@import "~assets/common.scss";

#Support {
  .a-feature {
    position: fixed;
    bottom: 70px;
    right: 12px;
    height: 63px;
    width: 63px;
  }

  .c-teacher {
    @include alignCenter;

    &__img {
      width: 50px;
      height: 64px;
      flex-shrink: 0;
      margin-right: 12px;
    }

    &__wrap {
      line-height: 1.5;
      font-size: 12px;
    }

    &__name {
      font-size: 16px;
      color: $strong-clr;
    }

    &__addr {
      color: $p-color;
      @include t-overflow(2);
      margin: 3px 0;
    }
  }

  .c-feq {
    &__title {
      font-size: 16px;
    }

    &__member {
      @include alignCenter;
      font-size: 12px;
    }

    &__avatar {
      @include round(20px);
      margin-right: 6px;
    }

    &__content {
      color: $p-color;
      line-height: 1.3;
      margin: 5px 0 3px;
      @include t-overflow(2);
    }

    .feq-footer {
      @include flex-between;
      font-size: 12px;

      &__wrap {
        @include alignCenter;
      }

      &__tag {
        padding: 3px;
        line-height: 1;
        border-radius: 2px;
        background: #f5f5f5;
        margin-right: 3px;
      }
    }
  }
}
</style>
